<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo1</title>
</head>
<style>
#first {
    color: green;
}

#second {
    color: red;
}
</style>

<body>
    <ul id="first"></ul>
    <ul id="second"></ul>
    <script>
    function add(el, msg) {
        var msgel = document.createElement('li');
        msgel.textContent = msg;
        el.appendChild(msgel);
    }
    var first = document.getElementById('first');
    add(first, 'page loading');
    var sec = document.getElementById('second');
    document.addEventListener('mousemove', function() {
        add(sec, 'event:mousemove');
    });
    document.addEventListener('click', function() {
    	add(sec,'event:click')
    })
    </script>
</body>

</html>